<!DOCTYPE html>
<html>
<head>
    <title>Interface Test Page</title>
    <style>
        /* 页面样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        form {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            font-size: 16px;
            padding: 10px;
            box-sizing: border-box;
        }
        button {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            font-size: 16px;
        }
        #response {
            border: 1px solid #ccc;
            padding: 10px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Interface Test Page</h1>
    <form id="testForm">
        <label for="url">URL:</label>
        <input type="text" id="url" name="url" placeholder="Enter API URL" required>
        <label for="method">HTTP Method:</label>
        <select id="method" name="method" required>
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="DELETE">DELETE</option>
        </select>
        <label for="headers">Headers:</label>
        <textarea id="headers" name="headers" placeholder="Enter headers (JSON format)"></textarea>
        <label for="body">Request Body:</label>
        <textarea id="body" name="body" placeholder="Enter request body (JSON format)"></textarea>
        <button type="submit">Test API</button>
    </form>
    <div id="response"></div>
    <button id="saveTestCase">Save Test Case</button>
</div>

<script>
    // 获取表单元素
    const form = document.getElementById('testForm');
    const responseDiv = document.getElementById('response');
    const saveTestCaseBtn = document.getElementById('saveTestCase');

    // 处理表单提交
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        // 获取表单数据
        const url = document.getElementById('url').value;
        const method = document.getElementById('method').value;
        const headers = JSON.parse(document.getElementById('headers').value || '{}');
        const body = document.getElementById('body').value;

        try {
            // 发送API请求
            const response = await fetch(url, {
                method,
                headers,
                body: body ? JSON.parse(body) : undefined
            });
            const data = await response.json();

            // 显示响应结果
            responseDiv.textContent = JSON.stringify(data, null, 2);
        } catch (error) {
            responseDiv.textContent = 'Error: ' + error.message;
        }
    });

    // 保存测试用例
    saveTestCaseBtn.addEventListener('click', () => {
        const testCase = {
            url: document.getElementById('url').value,
            method: document.getElementById('method').value,
            headers: JSON.parse(document.getElementById('headers').value || '{}'),
            body: document.getElementById('body').value
        };
        localStorage.setItem('testCase', JSON.stringify(testCase));
        alert('Test case saved!');
    });
</script>
</body>
</html>